<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="common.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myproject</title>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="page-header">
            <h1>超市管理系统  <small>have a try！</small></h1>
        </div>
        <div class="alert alert-success" style="z-index:1999;position: fixed;display:none;right: 50%;"  id="alert-success"></div>
        <div class="alert alert-danger" style="z-index:1999;position: fixed;display:none;right: 50%;" id="alert-danger"></div>
        <div class="jumbotron">

            <h1>尚未登陆</h1>
            <p>系统监测你尚未登陆,请先登录以继续操作</p>
            <span><a class="btn btn-primary btn-lg"  role="button"  onclick="Show('login')">登陆</a></span>
<!--            <span><a class="btn btn-default btn-lg"  role="button"  onclick="Show('register');">注册</a></span>-->
        </div>
        <!--    Login-->
        <div class="modal" id="login"  role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"  onclick="Hide('login')"><span >&times;</span></button>
                        <h4 class="modal-title">登录</h4>
                    </div>
                    <div class="modal-body" :model="loginForm">
                        <div class="form-group">
                            <label >userName</label>
                            <input v-model="loginForm.mid"  class="form-control" placeholder="name">
                        </div>
                        <div class="form-group">
                            <label >Password</label>
                            <input v-model="loginForm.passwd" type="password" class="form-control"  placeholder="Password">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" onclick="Hide('login')">Close</button>
                        <button type="button" class="btn btn-primary" @click="login" :disabled="!(this.loginForm.mid&&this.loginForm.passwd)" >Login</button>
                    </div>
                </div>
            </div>
        </div>
        <!--      register-->
        <div class="modal" id="register"  role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"  onclick="Hide('register')"><span >&times;</span></button>
                        <h4 class="modal-title">注册</h4>
                    </div>
                    <div class="modal-body" :model="registerForm" >
                        <div class="form-group">
                            <label >userName</label>
                            <input type="name" class="form-control" v-model="registerForm.name"  placeholder="name">
                            <span id="notice1">{{notice1}}</span>
                        </div>
                        <div class="form-group">
                            <label >Password</label>
                            <input type="password" class="form-control" v-model="registerForm.passwd" placeholder="请输入密码">
                            <span id="notice2">{{notice2}}</span>
                            <p></p>
                            <label >RePassword</label>
                            <input type="password" class="form-control" v-model="registerForm.repwd" placeholder="重复密码">
                            <span id="notice3">{{notice3}}</span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" onclick="Hide('register')">Close</button>
                        <button type="button" class="btn btn-primary" id="register_btn" @click="register" :disabled="!(notice1&&notice2&&notice3)">Register</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- built files will be auto injected -->
</body>
<script>
    function Hide(id){
        $('#'+id).hide();
    }
    function Show(id) {

        $('#'+id).show()

    }
    var app = new Vue({
        el: '#app',

        name: 'Login',
        data () {
            return {
                loginForm: {
                    mid: '',
                    passwd: ''
                },
                registerForm: {
                    name: '',
                    passwd: '',
                    repwd:''
                },
                isAble:false
            }
        },
        methods: {
            login () {
                if (!this.loginForm.mid) {
                    let danger = $('#alert-danger')
                    danger.text("请输入邮箱")
                    danger.fadeIn()
                    setTimeout(danger.fadeOut(),500)

                }
                else if (!this.loginForm.passwd) {
                    let danger = $('#alert-danger')
                    danger.text("请输入密码")
                    danger.fadeIn()
                    setTimeout(danger.fadeOut(),500)
                    return
                }

                $.post(baseUrl+"Visitor/managerLogin",this.loginForm,function(response,status){
                    if(response.result===true){
                    let success = $('#alert-success');
                    success.text("登录成功");
                    success.fadeIn()
                    setTimeout(success.fadeOut(),500)
                    $.cookie('mid',response.data.mid);
                    location.href="/market/detail.html";
                    }
                    else {
                        let danger = $('#alert-danger');
                        danger.text(response.msg);
                        danger.fadeIn()
                        setTimeout(danger.fadeOut(),500)
                    }
                });

            },
            register(){
                $.post(baseUrl+"Visitor/register",this.registerForm,function(response,status){
                    if(response.result === true) {
                        console.log(response.data);
                        console.log(response.msg);
                        alert("数据: " + response + "\n状态: " + status);
                    }
                    else {
                        console.log(response.msg)
                    }

                });

            },

        },
        computed:{
            notice1:function () {
                if(this.registerForm.name){
                    let re = /^\d{6,11}$/;
                    let notice = $('#notice1');
                    if (re.test(this.registerForm.name)) { //如果验证正确执行以下代码
                        notice.text ('账号验证成功');
                        notice.css('color','green');
                        return true
                    } else { //验证不成功，执行以下代码
                        notice.text ('请输入6-11位数字');
                        notice.css('color','red');
                    }
                }

            },
            notice2:function () {
                let re =  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
                let notice = $('#notice2');
                if (re.test(this.registerForm.passwd)) { //如果验证正确执行以下代码
                    notice.text ('密码格式验证成功');
                    notice.css('color','green');
                    return true
                } else { //验证不成功，执行以下代码
                    notice.text ('至少8-16个字符，至少1个大写字母，1个小写字母和1个数字');
                    notice.css('color','red');
                }
            },
            notice3:function () {
                let notice = $('#notice3');
                console.log(this.registerForm.repwd,this.registerForm.repwd);
                if(this.registerForm.passwd===this.registerForm.repwd && this.registerForm.name){
                    notice.text ('密码一致');
                    notice.css('color','green');
                    return true
                }
                else {
                    notice.text ('两次输入密码不一致');
                    notice.css('color','red');
                }
            }



        },
        watch:{

        }


    })


</script>
</html>
